<template>
  <div>
    <div class="RankingList">
      <div class="RankingList_left">
        <div class="header">
          <h3><router-link to="#">推荐节目</router-link></h3>
          <span><router-link to="#">更多&nbsp;></router-link></span>
        </div>
        <ul class="content">
          <li v-for="(v, i) in recommendList" :key="i">
            <div class="content_a">
              <span><img :src="v.coverUrl" /></span>
            </div>
            <div class="content_b">
              <span
                ><router-link to="#">{{ v.name }}</router-link></span
              >
              <span
                ><router-link to="#">{{ v.dj.brand }}</router-link></span
              >
            </div>
            <div class="content_c">
              <router-link :to="`/Radio/${v.radio.categoryId}`">{{ v.radio.category
              }}</router-link>
            </div>
          </li>
        </ul>
      </div>
      <div class="RankingList_right">
        <div class="header">
          <h3><router-link to="#">节目排行榜</router-link></h3>
          <span><router-link to="#">更多&nbsp;></router-link></span>
        </div>
        <ul class="content">
          <li v-for="(v, i) in RankingList" :key="i">
            <div class="content_a">
              <span><img :src="v.program.coverUrl" /></span>
            </div>
            <div class="content_b">
              <span
                ><router-link to="#">{{ v.program.name }}</router-link></span
              >
              <span
                ><router-link to="#">{{ v.program.dj.brand }}</router-link></span
              >
            </div>
            <div class="content_c">
              <router-link :to="`/Radio/${v.program.radio.categoryId}`">{{
                v.program.radio.category
              }}</router-link>
            </div>
          </li>
        </ul>
      </div>
      <!-- 推荐电台 -->
      <div>

      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 推荐节目数据
      recommendList: {},
      // 节目排行榜数据
      RankingList: {},
    };
  },
  //
  methods: {
    // 获取推荐节目数据
    getrecommendListData() {
      axios.get(`http://127.0.0.1:3000/program/recommend`).then((res) => {
        this.recommendList = res.data.programs;
      });
    },
    // 获取节目排行榜数据
    getRankingListData() {
      axios
        .get(`http://127.0.0.1:3000/dj/program/toplist?limit=10`)
        .then((res) => {
          this.RankingList = res.data.toplist;
        });
    },
    
  },
  //
  created() {
    this.getrecommendListData();
    this.getRankingListData();
  },
};
</script>
<style scoped>
.RankingList {
  display: flex;
  justify-content: space-between;
}
.RankingList .RankingList_left {
  width: 426px;
}
.RankingList .RankingList_right {
  width: 426px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 10px;
  border-bottom: 2px solid #c20c0c;
}
.header > h3 > a {
  font-size: 24px;
  font-weight: 400;
}
.header > span > a {
  font-size: 12px;
  color: #666666;
}
.header a:hover {
  text-decoration: underline;
}
.content {
  border: 1px solid #e2e2e2;
  border-top: none;
}
.content > li {
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0;
}
.content > li:nth-child(even) {
  background-color: #f7f7f7;
}
.content > li:hover {
  background-color: #eee;
}
.content > li > .content_a {
  width: 40px;
}
.content > li > .content_a > span{
  cursor: pointer;
}
.content > li > .content_a > span > img {
  width: 40px;
  height: 40px;
}
.content > li > .content_b {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 254px;
  font-size: 12px;
}

.content > li > .content_b > span {
  display: block;
  width: 254px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content > li > .content_b > span > a:hover {
  text-decoration: underline;
}
.content > li > .content_b > span:nth-child(2) a {
  color: #999999;
}
.content > li > .content_c {
  width: 64px;
  display: flex;
  align-items: center;
}

.content > li > .content_c > a {
  font-size: 12px;
  color: #999999;
  border: 1px solid #999999;
  padding: 0 6px;
}
.content > li > .content_c > a:hover {
  color: #666;
  border: 1px solid #666;
}
</style>